<template>
  <div class="file-list">
    <el-empty v-show="!fileList.length" description="暂无数据"></el-empty>
    <el-checkbox-group v-model="checkedData" @change="handleCheckedFilesChange">
      <el-row :gutter="20">
        <el-col :span="6" v-for="v in fileList" :key="v.id">
          <div class="file-item">
            <div class="file-icon-box" @click="handleLook(v)">
              <div class="txt-wrap" v-if="type == 1">
                <img :src="v | fileThumbnail" alt="" />
              </div>
              <div class="img-wrap" v-if="type == 2">
                <img :src="v | fileThumbnail(1)" alt="" title="点击预览" />
              </div>
              <div class="video-wrap" v-if="type == 3">
                <template v-if="v.type != 'mp4'">
                  <img :src="v | fileThumbnail" alt="" />
                </template>
                <div v-else>
                  <video :src="v | fileThumbnail(1)"></video>
                  <span class="el-icon-video-play"></span>
                </div>
              </div>
            </div>
            <div class="file-name" :title="v.name">
              <el-checkbox :label="v.fileId">
                <span class="sheng">{{ v.name }}</span>
              </el-checkbox>
            </div>
            <div class="file-info">
              <p class="file-size">
                <span class="el-icon-document"></span>
                {{ v.size | fileSizeFilter }}
              </p>
              <p class="download">
                <span class="el-icon-download"></span>
                <i> {{ v.evaluateVO.downloadNum || 0 }}</i>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-checkbox-group>
  </div>
</template>
<script>
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      checkedData: [],
      url: '',
      srcList: [],
    }
  },
  props: ['fileList', 'type', 'checkedFiles'],
  watch: {
    checkedFiles(v) {
      this.checkedData = v
    },
  },
  mounted() {
    this.checkedData = this.checkedFiles
  },
  methods: {
    handleCheckedFilesChange(value) {
      this.checkedData = value
      this.$emit('e-checkedChange', value)
    },
    handleLook(row) {
      Bus.$emit('showPreview', row, this.fileList)
    },
  },
}
</script>
<style scoped lang="scss">
.file-list {
  min-height: 300px;
  .file-item {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    .file-icon-box {
      position: relative;
      width: 100%;
      height: 130px;
      text-align: center;
      line-height: 150px;
      background: #f5f5f5;
      .video-wrap,
      .txt-wrap {
        text-align: center;
        img {
          width: 80px;
          height: auto;
          margin: 0px auto;
          transform: translateY(25px);
        }
      }
      .img-wrap {
        display: flex;
        width: 100%;
        height: 100%;
      }
      .video-wrap {
        position: relative;
        height: 100%;
        span {
          position: absolute;
          left: 50%;
          top: 50%;
          color: #fff;
          margin-left: -22px;
          margin-top: -22px;
          cursor: pointer;
          font-size: 44px;
          font-weight: normal;
        }
      }
      span {
        font-size: 44px;
        color: #aaa;
      }
      img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        min-width: 80px;
        cursor: pointer;
        margin: auto;
      }
      video {
        display: block;
        width: 100%;
        height: 130px;
      }
    }
    .file-name {
      padding: 5px 0;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      color: #333;
    }
    .file-info {
      height: 24px;
      line-height: 24px;
      .file-size {
        float: left;
        color: #999;
        font-size: 14px;
      }
      .download {
        float: right;
        color: #999;
        font-size: 14px;
      }
    }
  }
}
</style>
<style scoped>
.file-list >>> .el-checkbox {
  width: 100%;
}
.file-list >>> .el-checkbox__input {
  float: left;
  margin-top: 5px;
  width: 22px;
}
.file-list >>> .el-checkbox__label {
  float: left;
  padding-left: 0;
  margin-top: 2px;
  width: 85%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>